<template>
  <div class="app-container">
    <div style="color:red;text-align:center">*注意默认查询的是全部的统计数据，如果要查询其它的，请选择范围查询</div>
    <br>
    <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
      <el-tab-pane label="药品销售列表" name="drug">
        <!-- 查询条件开始 -->
        <el-form ref="queryDrugFrom" :model="queryDrugParams" :inline="true" label-width="68px">
          <el-form-item label="药品名称" prop="careOrderItem.itemName">
            <el-input
                v-model="queryDrugParams.itemName"
                placeholder="请输入药品名称"
                clearable
                size="small"
                style="width:180px"
            />
          </el-form-item>
          <el-form-item label="交易时间" prop="updateTime">
            <el-date-picker
                v-model="queryDrugParams.dateRange"
                size="small"
                style="width:240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholde="开始日期"
                end-placeholde="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDrugQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetDrugQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 数据表格开始 -->
        <el-table  border :data="drugList" >
          <el-table-column label="药品ID" prop="careOrderItem.itemRefId" align="center" />
          <el-table-column label="药品名称" prop="careOrderItem.itemName" align="center" />
          <el-table-column label="销售价格" prop="careOrderItem.price" align="center" />
          <el-table-column label="交易数量" prop="careOrderItem.num" align="center" />
          <el-table-column label="交易总价" prop="careOrderItem.amount" align="center" />
          <el-table-column label="创建时间" prop="updateTime" align="center" />
        </el-table>
        <!-- 数据结束结束 -->
        <!-- 分页控件开始 -->
        <el-pagination
            v-show="queryDrugParams.total>0"
            :current-page="queryDrugParams.pageNo"
            :page-sizes="[5,10, 15, 20]"
            :page-size="queryDrugParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryDrugParams.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <!-- 分页控件结束 -->
      </el-tab-pane>

<!-- ///////////////////////药品销售统计列表////////////////////////-->
      <el-tab-pane label="药品销售统计列表" name="drugStat">
        <!-- 查询条件开始 -->
        <el-form ref="queryDrugStatFrom" :model="queryDrugStatParams" :inline="true" label-width="68px">
          <el-form-item label="药品名称" prop="careOrderItem.itemName">
            <el-input
                v-model="queryDrugStatParams.itemName"
                placeholder="请输入药品名称"
                clearable
                size="small"
                style="width:180px"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDrugStatQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetDrugStatQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 数据表格开始 -->
        <el-table  border :data="drugStatList" show-summary>
          <el-table-column label="药品ID" prop="medicinesId" align="center" />
          <el-table-column label="药品名称" prop="medicinesName" align="center" />
          <el-table-column label="销售次数" prop="itemNumber" align="center" />
          <el-table-column label="销售数量" prop="itemNums" align="center" />
          <el-table-column label="总金额" prop="totalAmounts" align="center" />
        </el-table>
        <!-- 数据结束结束 -->


      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 被激活的tab名称
      activeName: 'drug',
      // 药品总销售数据
      drugList: [],
      drugList1: [],
      // 药品的销售数量数据
      drugStatList: [],
      // 日期范围
      // dateRange: [],
      // 列表查询参数
      queryDrugParams: {
        pageNo: 1, // 当前页数
        pageSize: 5, // 每页显示数量
        total: 0,// 总记录数
        itemName: undefined,// 药品名称
        dateRange:undefined,// 交易时间
      },

      // 数量统计查询参数
      queryDrugStatParams: {
        itemName: undefined,// 药品名称
        createTime:undefined,// 交易时间
      },
    }
  },
  created() {
    // 默认查询销售列表
    this.listDrug()
  },
  methods: {
    // 点击tab事件
    handleClick() {
      //console.log(this.activeName)
      if (this.activeName === 'drug') {
        this.listDrug()
      } else {
        this.listDrugStat()
      }
    },
    // 查询销售列表
    listDrug() {
      this.$http.post("/medicinesOrder/drug/drug", this.queryDrugParams).then(res => {
        //console.log(res.data.data)
        if (res.data.code === 200) {
          this.drugList=res.data.data.list;
         this.queryDrugParams.total=res.data.data.total;
        }
      })
    },
    // 销售列表查询
    handleDrugQuery() {
      this.listDrug()
    },
    // 重置销售列表查询
    resetDrugQuery() {
      this.queryDrugParams.itemName=undefined;
      this.queryDrugParams.dateRange=undefined;
      this.listDrug()
    },

    // 查询总销售列表
    listDrugStat() {
      this.$http.post("/medicinesOrder/drug/drugStat", this.queryDrugStatParams).then(res => {
       // console.log(res.data)
        if (res.data.code === 200) {
          this.drugStatList=res.data.data.data;
          //alert(JSON.stringify(this.drugStatList))
        }
      })
    },
    // 销售列表查询
    handleDrugStatQuery() {
      this.listDrugStat()
    },
    // 重置销售列表查询
    resetDrugStatQuery() {
      this.queryDrugStatParams={}
      this.listDrugStat()
    },
// 分页pageSize变化时触发
    handleSizeChange(val) {
      this.queryDrugParams.pageSize = val;
      // 重新查询
      this.listDrug();
    },
    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChange(val) {
      this.queryDrugParams.pageNo = val;
      // 重新查询
      this.listDrug();
    },
  }
}
</script>
